<template>
    <div class="player">
        <PlayVideo :info="nowPlayInfo" @nextVideo="nextVideo"></PlayVideo>
        <div class="videos">
            <div v-for="item in videos" :key="item.uid" :class="{ item: true, active: item.uid == nowPlayInfo.uid }"
                @click="changePlayVideo(item)" :title="item.name">
                {{ item.name }}
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import PlayVideo from '@renderer/components/PlayVideo/index.vue'
import { playerInfoStore } from '@renderer/store/playerInfo'
import { storeToRefs } from 'pinia'
import { nextTick, onMounted, ref } from 'vue'
const { ipcRenderer } = require('electron')
const playerInfo = playerInfoStore()
const { localPlayback, currentPlaylist } = storeToRefs(playerInfo)
const videos: any = ref([])
const nowPlayInfo: any = ref({})
const changePlayVideo = (item: any) => {
    nowPlayInfo.value = item
}
const nextVideo = () => {
    let index = videos.value.findIndex((item: any) => item.uid == nowPlayInfo.value.uid)
    if (index == videos.value.length - 1) {
        index = -1
    }
    nowPlayInfo.value = videos.value[index + 1]
}
onMounted(() => {
    videos.value = playerInfo.currentPlaylist
    nextTick(() => {
        currentPlaylist.value = []
        ipcRenderer.send('update-storage', JSON.stringify(playerInfo.$state), 'playerInfo')
    })
    nowPlayInfo.value = localPlayback.value
})

</script>

<style scoped lang="scss">
.player {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 200px;


    .videos {
        width: 100%;
        height: 100%;
        padding: 5px;
        box-sizing: border-box;
        overflow-y: auto;
        @include mixin.scroll_bar();

        .item {
            font-size: 15px;
            box-sizing: border-box;
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            padding: 2px 7px;
            margin: 5px 0;
            transition: all 0.3s;
            border-radius: 5px;
            cursor: pointer;
            @include mixin.box_shadow();

            &:hover {
                background-color: #8585857a;
                color: white;
            }
        }

        .active {
            background-color: #8585857a;
            color: white;
        }
    }
}
</style>